<template>
    <!-- 弹窗审核链接 -->
    <el-dialog v-model="auditLinkDialogFormVisible" title="审核链接" width="400px" center @close="auditLinkCloseDialog(false)">
        <div>
            <p style="margin-bottom: 10px;line-height: 25px;">
                链接名称：<span style="color:#2fa7b9;">{{ auditLinkInfo.urlName }}</span>
            </p>
            <p style="margin-bottom: 10px;line-height: 25px;">
                链接地址：<a style="color:#2fa7b9;" :underline="false" :href="auditLinkInfo.urlAddres" target="_blank">{{
                    auditLinkInfo.urlAddres }}（点击前往）</a>
            </p>
            <p style="margin-bottom: 10px;line-height: 25px;">
                链接介绍：<span style="color:#2fa7b9;">{{ auditLinkInfo.urlReferral }}</span>
            </p>
            <p style="margin-bottom: 10px;line-height: 25px;">
                站长邮箱：
                <!-- <span style="color:#2fa7b9;">{{auditLinkInfo.webmasterEmail}}</span> -->
                <a style="color:#2fa7b9;"
                    :href="'http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=' + auditLinkInfo.webmasterEmail"
                    target="_blank">{{ auditLinkInfo.webmasterEmail }}（点击联系站长）</a>
            </p>
            <p style="margin-bottom: 10px;line-height: 25px;">
                申请类型：
                <span v-if="auditLinkInfo.urlType == 1" style="color:#2fa7b9;">推荐网站</span>
                <span v-if="auditLinkInfo.urlType == 2" style="color:#2fa7b9;">友情链接</span>
            </p>
            <p style="margin-bottom: 10px;line-height: 25px;">
                审核结果：
                <el-select v-model="value" class="m-2" placeholder="请选择审核结果" size="large" style="width: 75%;">
                    <el-option label="待审核" :value="1" />
                    <el-option label="通过" :value="2" />
                    <el-option label="拒绝" :value="3" />
                </el-select>
            </p>
            <p style="text-align: center;color: #9f9f9f;line-height: 25px;">
                审核结果系统将会自动下发至站长邮箱
            </p>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="auditLinkCloseDialog(false)">取消</el-button>
                <el-button plain color="#2fa7b9" @click="submitConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {
    reactive,
    ref,
    toRefs,
    nextTick,
    watch,
    defineEmits
} from 'vue'

import {
    ElMessage,
    ElLoading,
    ElNotification
} from 'element-plus'
import { UpdateUrlPass, CheckUserEmail } from "@/api/backstage/index";
type Props = {
    auditLinkDialogFormVisible?: any,
    auditLinkInfo?: any,
}
const props = withDefaults(defineProps<Props>(), {
    auditLinkDialogFormVisible: false,
    auditLinkInfo: null,
})
const emit = defineEmits(['onAuditLinkCloseDialog'])
const state = reactive({
    // 弹窗状态
    auditLinkDialogFormVisible: props.auditLinkDialogFormVisible,
    // 当前链接的信息
    auditLinkInfo: props.auditLinkInfo,
    // 审核结果
    value: null,
})
const { auditLinkDialogFormVisible, auditLinkInfo, value } = toRefs(state)
watch(() => [props.auditLinkDialogFormVisible, props.auditLinkInfo], (newval, oldval) => {
    state.auditLinkDialogFormVisible = newval[0]
    state.auditLinkInfo = newval[1]
})

// 取消
const auditLinkCloseDialog = (visible: Boolean) => {
    // 关闭窗口
    emit("onAuditLinkCloseDialog", visible);
    // 清除选择
    state.value = null;
};

// 确定审核
const submitConfirm = () => {
    let loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    // 判断审核内容是否由改变

    // 判断审核结果为：待审核|通过|拒绝，发送不同的审核结果信息
    if (state.value == 1) { // 待审核
        // 将审核结果传给数据库进行修改
        const params = {
            urlId: state.auditLinkInfo.urlId,
            urlPass: state.value,
        }
        UpdateUrlPass(
            params
        ).then((res) => {
            if (res.code == 0) {
                setTimeout(() => {
                    loading.close()
                    ElNotification({
                        title: '提示',
                        message: '已审核成功',
                        type: 'success',
                    })
                    // 清除选择
                    state.value = null;
                    // 关闭弹窗
                    emit("onAuditLinkCloseDialog", false, res.data);
                }, 1000)
            }
        })

    } else if (state.value == 2) { // 通过
        // 将审核结果传给数据库进行修改
        const params = {
            urlId: state.auditLinkInfo.urlId,
            urlPass: state.value,
        }
        UpdateUrlPass(
            params
        ).then((res) => {
            if (res.code === 0) {
                loading.close()
                ElNotification({
                    title: '提示',
                    message: '已审核成功',
                    type: 'success',
                })
                // 清除选择
                state.value = null;
                // 关闭弹窗
                emit("onAuditLinkCloseDialog", false);
            } else {
                loading.close()
                ElNotification({
                    title: '提示',
                    message: '审核失败',
                    type: 'error',
                })
                // 清除选择
                state.value = null;
                // 关闭弹窗
                emit("onAuditLinkCloseDialog", false);
            }
        })

    } else if (state.value == 3) { // 拒绝
        // 将审核结果传给数据库进行修改
        const params = {
            urlId: state.auditLinkInfo.urlId,
            urlPass: state.value,
        }
        UpdateUrlPass(
            params
        ).then((res) => {
            if (res.code === 0) {
                loading.close()
                ElNotification({
                    title: '提示',
                    message: '已审核成功',
                    type: 'success',
                })
                // 清除选择
                state.value = null;
                // 关闭弹窗
                emit("onAuditLinkCloseDialog", false);
            } else {
                loading.close()
                ElNotification({
                    title: '提示',
                    message: '审核失败',
                    type: 'error',
                })
                // 清除选择
                state.value = null;
                // 关闭弹窗
                emit("onAuditLinkCloseDialog", false);
            }
        })

    }
}

</script>
<style scoped>
.el-button--text {
    margin-right: 15px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.el-select {
    width: 100%;
}

:global(.el-dialog__title) {
    color: #2fa7b9 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

:deep(.el-upload-dragger) {
    padding: 0px !important;
}

:global(.el-dialog__body) {
    padding: 25px calc(var(--el-dialog-padding-primary) + 5px) 0px !important;
}
</style>